<template>
      <el-dialog title="创建部门" :visible.sync="dialogFormVisible" width="35%" :append-to-body="true"
      @close="dialogClose">
        <el-form status-icon label-width="100px">
            <el-form-item label="系统内部ID">
                <el-input v-model="dept.fdid" type="text" autocomplete="off" />
            </el-form-item> 
            <el-form-item label="部门名称">
                <el-input v-model="dept.fdname" type="text" autocomplete="off" />
            </el-form-item>
            <el-form-item label="部长">
                <el-select v-model="dept.feid" placeholder="选择部门部长" size="medium">
                    <el-option
                      v-for="item in empList"
                      :key="item.feid"
                      :label="item.fename"
                      :value="item.feid"
                      size="medium"
                      >
                    </el-option>
                  </el-select>
            </el-form-item>
            <el-form-item label="备注">
                <el-input v-model="dept.fdmemo" type="textarea" placeholder="请输入内容" maxlength="200"
                show-word-limit  size="medium" autocomplete="off" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm(dept)">提交</el-button>
                <el-button @click="resetForm">重置</el-button>
            </el-form-item>
        </el-form>
      </el-dialog>
  </template>
  <script>
  import { createDept,updateDept } from '@/api/dept'
  import { getEmpList } from '@/api/emp'
  
  export default {
    props: {
        dialogFormVisible: Boolean,
        empList: {
            type:Array,
            default: []
        },
        updateOrCreate: Boolean,
        editDeptInfo: {
            type: Array,
            default: {}
        }
    },
    data() {
      return {
        dept: {}
      }
    },
    updated () {
      this.dept = this.editDeptInfo
      console.log(this.dept.feid)
    },
    methods: {
      submitForm(dept) {
        if (this.updateOrCreate) {
          updateDept(dept).then(response => {
            this.$message.success('修改部门成功')
          })
          this.$parent.initGetDeptList()
          dialogClose()
        } else {
          createDept(dept).then(response => {
            this.$message.success('创建部门成功')
          })
          this.$parent.initGetDeptList()
          dialogClose()
        }
      },
      resetForm() {
        this.dept = {}
      },
      // 解决父页面按钮只能点击一次问题
      dialogClose() {
        this.dialogFormVisible = false
        this.$parent.vueReset()
      }
    }
  }
  </script>
  